<?
$sphot = "SELECT r1.id,name,image FROM tbl_product AS r1 JOIN ( SELECT ( RAND( ) * ( SELECT MAX( id ) FROM tbl_product)) AS id) AS r2 WHERE r1.id >= r2.id ORDER BY r1.id ASC LIMIT 15";
$k = @mysql_query($sphot, $conn);
?>
<script type="text/javascript">
 
 //Plugin start
 (function($)
   {
     var methods = 
       {
         init : function( options ) 
         {
           return this.each(function()
             {
               var _this=$(this);
                   _this.data('marquee',options);
               var _li=$('>li',_this);
                   
                   _this.wrap('<div class="slide_container"></div>')
                        .height(_this.height())
                       .hover(function(){if($(this).data('marquee').stop){$(this).stop(true,false);}},
                              function(){if($(this).data('marquee').stop){$(this).marquee('slide');}})
                        .parent()
                        .css({position:'relative',overflow:'hidden','height':$('>li',_this).height()})
                        .find('>ul')
                        .css({width:screen.width*2,position:'absolute'});
           
                   for(var i=0;i<Math.ceil((screen.width*3)/_this.width());++i)
                   {
                     _this.append(_li.clone());
                   } 
             
               _this.marquee('slide');});
         },
      
         slide:function()
         {
           var $this=this;
           $this.animate({'left':$('>li',$this).width()*-1},
                         $this.data('marquee').duration,
                         'swing',
                         function()
                         {
                           $this.css('left',0).append($('>li:first',$this));
                           $this.delay($this.data('marquee').delay).marquee('slide');
             
                         }
                        );
                             
         }
       };
   
     $.fn.marquee = function(m) 
     {
       var settings={
                     'delay':2000,
                     'duration':900,
                     'stop':true
                    };
       
       if(typeof m === 'object' || ! m)
       {
         if(m){ 
         $.extend( settings, m );
       }
 
         return methods.init.apply( this, [settings] );
       }
       else
       {
         return methods[m].apply( this);
       }
     };
   }
 )( jQuery );
 
 //Plugin end
 
 //call
 $(document).ready(function(){
        $('.slide').marquee({delay:3000});
    });
</script>
<style>
 ul.slide{
    margin:0;
    padding:0;
    list-style-type:none;
 }
 ul.slide li{
    float:left;
    list-style-type:none;
}
 ul.slide img{
    height:150px;
}
</style>
<div class="news_thumb_box" style="height: 100%;">
  <div class="new_thumb_item" style="height: 100%;">

    <? 
        $i = 1;
        while ($pro = @mysql_fetch_assoc($k)) {
            $strLinkFriendly = unicodeToNonUnicode($pro["name"]);
            if($i == 1) {
                ?>
                <ul class="slide">
                <?               
            }  
    ?>
    <li class="news_thumb"> 
        <a title="<?= $pro["name"] ?>" href="/khohangtot/product-detail/<?=$pro['id']?>/<?=$strLinkFriendly?>.htm">
        <figure>
        <img title="<?= $pro["name"] ?>"  src="/khohangtot/images/product/images/<?= $pro["image"] ?>"/>
            <figcaption>
            <?= $pro["name"] ?>
            </figcaption>
        </figure>
        </a>
    </li>
    <!--end .news_thumb-->
   <? 
        $i++;
        if($i==4) {
            ?>
            </ul>
            <?
            $i = 1;
        }
        
        } 
    ?>
  </div>
  <div class="clear"></div>
</div>
<!--end .news_thumb_box--> 
